<template>
  <div class="index-container">
    <div style="overflow: hidden">
      <div class="floatl">
        <h1 class="ml-1">
          办公流程
          <a class="ml-2" style="font-size: 16px">费用报销单</a>
        </h1>
      </div>
      <div style="line-height: 50px" class="floatr">
        面包屑/ 面包屑 / 面包屑
      </div>
    </div>
    <a-row style="" class="mb-2">
      <a-col :sm="12" :md="4" :lg="7" :xl="4">
        <lattice titleName="流程1" :bodyNumber="545"></lattice>
      </a-col>
      <a-col :sm="12" :md="4" :lg="7" :xl="4">
        <lattice titleName="流程2" :bodyNumber="123" bgColor="rgb(255,172,0)">
          <template #bodyIcon>
            <HeatMapOutlined class="bodyIcon" />
          </template>
        </lattice>
      </a-col>
      <a-col :sm="12" :md="4" :lg="7" :xl="4">
        <lattice titleName="流程3" :bodyNumber="103" bgColor="rgb(153,43,172)">
          <template #bodyIcon>
            <HeatMapOutlined class="bodyIcon" />
          </template>
        </lattice>
      </a-col>
      <a-col :sm="12" :md="4" :lg="7" :xl="4">
        <lattice titleName="流程4" :bodyNumber="223" bgColor="rgb(0,172,86)">
          <template #bodyIcon>
            <HeatMapOutlined class="bodyIcon" />
          </template>
        </lattice>
      </a-col>
      <a-col :sm="12" :md="4" :lg="7" :xl="4">
        <lattice titleName="流程5" :bodyNumber="253" bgColor="rgb(129,129,129)">
          <template #bodyIcon>
            <HeatMapOutlined class="bodyIcon" />
          </template>
        </lattice>
      </a-col>
      <a-col :sm="12" :md="4" :lg="7" :xl="4">
        <lattice titleName="流程6" :bodyNumber="253" bgColor="rgb(129,129,129)">
          <template #bodyIcon>
            <HeatMapOutlined class="bodyIcon" />
          </template>
        </lattice>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="13">
        <a-skeleton :loading="tableLoading" active>
          <draggable
            class="height list-group"
            :class="isBorder ? 'border' : ''"
            item-key="name"
            tag="transition-group"
            :component-data="{
              tag: 'ul',
              name: 'flip-list',
              type: 'transition',
            }"
            v-model="dragArrLeft"
            v-bind="dragOptions"
            @end="move"
            @start="startMove"
          >
            <template #item="{ element }">
              <li>
                <div v-if="element.name === 'table'">
                  <panel title="办事处" bodyPadding="0px">
                    <template #leftIcon>
                      <PieChartOutlined />
                    </template>
                    <template #head_right>
                      <p
                        style="color: black"
                        class="mr-2 hoverFinger"
                        @click="GotoPending"
                      >
                        >>> 更多
                      </p>
                    </template>

                    <vxe-table
                      size="small"
                      :loading="loading"
                      :data="tableData"
                    >
                      <vxe-table-column
                        show-overflow
                        min-width="80px"
                        title="标题"
                      >
                        <template v-slot="{ row }">
                          <a @click="jumpHandleFlow(row.flowId, row.id)">
                            {{ row.title }}
                          </a>
                        </template>
                      </vxe-table-column>
                      <vxe-table-column
                        min-width="80px"
                        field="stepName"
                        title="步骤"
                      ></vxe-table-column>
                      <vxe-table-column
                        min-width="80px"
                        field="creatorTime"
                        title="发送时间"
                        :formatter="formatDateTime"
                      ></vxe-table-column>
                      <vxe-table-column
                        min-width="80px"
                        field="creatorName"
                        title="发送人"
                      ></vxe-table-column>

                      <vxe-table-column
                        width="50px"
                        align="center"
                        title="操作"
                        fixed="right"
                      >
                        <template v-slot="{ row }">
                          <a @click="jumpHandleFlow(row.flowId, row.id)">
                            处理
                          </a>
                          <!-- <span v-if="row.isDelete">
                      <a-divider type="vertical" />
                      <a @click="hangleDelete(row.id)">作废</a>
                    </span> -->
                        </template>
                      </vxe-table-column>
                    </vxe-table>
                  </panel>
                </div>
                <div v-else-if="element.name === 'list'">
                  <panel title="发起流程">
                    <div>
                      <div v-for="(item, index) in flowData" :key="index">
                        <p class="dictName ml-3">{{ item.dictName }}</p>
                        <lattice
                          @click="jumpStartFlow(child.id)"
                          v-for="(child, i) in item.data"
                          :key="i"
                          :titleName="child.title"
                          :onlyOne="true"
                          class="floatl"
                          style="margin-left: 15px"
                        ></lattice>
                        <a-divider></a-divider>
                      </div>
                    </div>
                  </panel>
                </div>
              </li>
            </template>
          </draggable>
        </a-skeleton>
      </a-col>
      <a-col :span="10" :offset="1">
        <a-skeleton :loading="tableLoading" active>
          <draggable
            class="height list-group"
            :class="isBorder ? 'border' : ''"
            item-key="name"
            tag="transition-group"
            :component-data="{
              tag: 'ul',
              name: 'flip-list',
              type: 'transition',
            }"
            v-model="dragArrRight"
            v-bind="dragOptions"
            @end="move"
            @start="startMove"
          >
            <template #item="{ element }">
              <li>
                <div v-if="element.name === 'table'">
                  <panel title="办事处" bodyPadding="0px">
                    <template #leftIcon>
                      <PieChartOutlined />
                    </template>
                    <template #head_right>
                      <p
                        style="color: black"
                        class="mr-2 hoverFinger"
                        @click="GotoPending"
                      >
                        >>> 更多
                      </p>
                    </template>

                    <div>
                      <vxe-table
                        size="small"
                        :loading="loading"
                        :data="tableData"
                      >
                        <!-- <vxe-table-column width="50px" type="seq"></vxe-table-column> -->
                        <vxe-table-column
                          show-overflow
                          min-width="80px"
                          title="标题"
                        >
                          <template v-slot="{ row }">
                            <a @click="jumpHandleFlow(row.flowId, row.id)">
                              {{ row.title }}
                            </a>
                          </template>
                        </vxe-table-column>
                        <vxe-table-column
                          min-width="80px"
                          field="stepName"
                          title="步骤"
                        ></vxe-table-column>
                        <vxe-table-column
                          min-width="80px"
                          field="creatorTime"
                          title="发送时间"
                          :formatter="formatDateTime"
                        ></vxe-table-column>
                        <vxe-table-column
                          min-width="80px"
                          field="creatorName"
                          title="发送人"
                        ></vxe-table-column>

                        <vxe-table-column
                          width="50px"
                          align="center"
                          title="操作"
                          fixed="right"
                        >
                          <template v-slot="{ row }">
                            <a @click="jumpHandleFlow(row.flowId, row.id)">
                              处理
                            </a>
                            <!-- <span v-if="row.isDelete">
                      <a-divider type="vertical" />
                      <a @click="hangleDelete(row.id)">作废</a>
                    </span> -->
                          </template>
                        </vxe-table-column>
                      </vxe-table>
                    </div>
                  </panel>
                </div>
                <div v-else-if="element.name === 'list'">
                  <panel title="发起流程">
                    <div>
                      <div v-for="(item, index) in flowData" :key="index">
                        <p class="dictName ml-3">{{ item.dictName }}</p>
                        <lattice
                          @click="jumpStartFlow(child.id)"
                          v-for="(child, i) in item.data"
                          :key="i"
                          :titleName="child.title"
                          :onlyOne="true"
                          class="floatl"
                          style="margin-left: 15px"
                        ></lattice>
                        <a-divider></a-divider>
                      </div>
                    </div>
                  </panel>
                </div>
              </li>
            </template>
          </draggable>
        </a-skeleton>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { Gettodopagelist } from '@/api/flowtask/api'
  import { formatDateTime } from '@/utils/public/tableformat'
  import { HeatMapOutlined, PieChartOutlined } from '@ant-design/icons-vue'
  import lattice from '@/plugins/lattice/lattice'
  import { Getgroups } from '@/api/flow/api'
  import draggable from 'vuedraggable'
  import { getLayout, setLayout } from '@/utils/layout'
  export default {
    name: 'Index',
    components: { lattice, HeatMapOutlined, PieChartOutlined, draggable },
    data() {
      return {
        tableLoading: false,
        loading: false,
        tableData: [],
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
        flowData: [],
        isBorder: false, // 是否有边框
        dragArrRight: [{ name: 'table' }],
        dragArrLeft: [{ name: 'list' }],
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost',
        }
      },
    },
    created() {
      var layout = JSON.parse(getLayout())
      if (layout !== null) {
        this.dragArrRight = layout.right
        this.dragArrLeft = layout.left
      }
      this.getData()
      this.getFlowdata()
    },
    methods: {
      startMove() {
        this.isBorder = true
      },
      move() {
        this.tableLoading = true
        setTimeout(() => {
          this.tableLoading = false
        }, 500)
        this.isBorder = false
        console.log(this.dragArrLeft)
        console.log(this.dragArrRight)
        setLayout(
          JSON.stringify({
            left: this.dragArrLeft,
            right: this.dragArrRight,
          })
        )
      },
      getFlowdata() {
        Getgroups().then((res) => {
          if (res.isSuccess) {
            this.flowData = res.content
          } else {
            console.log('error', res)
            this.$message.error('请求出错了，请刷新重试')
          }
        })
      },

      // 发起流程
      jumpStartFlow(id) {
        this.$router
          .push({
            path: '/workbench/businessList',
            query: {
              id: id,
            },
          })
          .catch((err) => {
            console.log(err)
          })
      },

      //---------------------------

      formatDateTime,
      getData() {
        this.loading = true
        const queryData = {
          SkipCount: 1,
          MaxResultCount: 8,
        }

        Gettodopagelist(queryData).then((res) => {
          if (res.isSuccess) {
            this.tableData = res.content.items
            this.tablePage.totalResult = res.content.totalCount
            this.loading = false
          } else {
            console.log('error', res)
            this.$message.error('请求出错了，请刷新重试')
          }
        })
      },

      // 跳转此流程列表
      jumpHandleFlow(flowId, id) {
        this.$router
          .push({
            path: '/workbench/startFlow',
            query: {
              id: flowId,
              taskId: id,
            },
          })
          .catch((err) => {
            console.log(err)
          })
      },

      GotoPending() {
        //更多跳转至待处理页面
        this.$router.push('/workbench/pending')
      },
    },
  }
</script>
<style scoped lang="less">
  .index_one {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .index_two {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    & > span:nth-child(1) {
      width: 60%;
      font-size: 20px;
      color: white;
    }
    // .head_left{
    //   span{
    //     width:auto;
    //   }
    // }
    span:nth-child(2) {
      width: 35%;
    }
  }
  .hoverFinger {
    font-size: 13px;
  }
  .height {
    min-height: 350px;
  }
  .border {
    border: 1px dashed #b6c2c9;
  }
</style>
